
/* eslint-disable vue/valid-v-bind */
<template>
  <!-- //   先介绍一下背景
//   首先头顶上有一个保存按钮,用来上传图片的
//   下面是内容 , 有一个input框,type=file.. 有一个button, 用来代替input去选择文件
//   我的后台是要从请求的api里拿到上传的url地址,再通过头顶的保存按钮上传,之后返回一个图片的url地址,动态绑定到页面的img标签上显示出来
//   参考了网上一些写法, 我这里只为了实现功能, 不做其它处理
// 进化版本 还是有bug
// 样式就不写了, 最后贴张图 -->
  <div class="main">
    <!-- 保存可以参考这个方法 -->
    <!-- <div @click="onUpload">保存</div> -->
    <!-- //顶部上传按钮 -->
    <el-button
      v-if="!imageUrl"
      type="button"
      :disabled="!canInput"
      class="xunzeimage"
      @click="onPickFile"
    ><i class="el-icon-plus"></i></el-button>
    <!-- {{ name }} -->
    <!-- {{ canInput }} -->
    <!-- //把下面input隐藏,代替它选择文件 -->

    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="getFile"
    />
    <div class="imgUrl">
      <div v-if="imageUrl">
        <el-button :disabled="!canInput" type="text" @click="delImg"><i class="el-icon-close"></i></el-button>
        <!-- <h4>修改的身份证{{ title }}图片</h4> -->
        <img :src="'data:image/png;base64,' + imageUrl" />
      </div>
      <!-- <div v-if="postUrl">
        <el-button v-if="postUrl" :disabled="canInput" type="text" @click="delImg"><i class="el-icon-close"></i></el-button>
        <h4>已上传身份证{{ title }}图片</h4>
        <img :src="'data:image/png;base64,' + postUrl" alt="" />
      </div> -->
    </div>
  <!-- <img :src="imageUrl" /> -->
  <!-- //绑定文件地址 -->
  </div>
</template>

<script>
// import axios from "axios"; //获取上传的链接
export default {
  // name: "whatever",
  props: {
    // imageUrl: {
    //   type: String,
    //   default: () => ''
    // },
    canInput: {
      type: Boolean,
      required: true
    },
    postUrl: {
      type: String,
      default: () => ''
    },
    title: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      imageUrl: "", // img绑定的src地址
      postUrls: "", // 需要上传到的地址
      name: ""
    };
  },
  watch: {
    postUrl: {
      handler(val) {
        this.imageUrl = val
        if (val !== '') {
          console.log(val)
          this.$emit('child-event', this.imageUrl)
        }
      }
    }
  },
  created() {
    // console.log(this.postUrl)

    // 第一步:先请求一下api,看看需要上传到哪里去,存到postUrl里面 ( 做了跨域配置,所以直接写成了api )
    // axios.get("api/getUploadInfo?type=image").then(res => {
    //   if (res.status === 200 && res.data) {
    //     let data = res.data.data;
    //     let postUrl = data.url;
    //     console.log(postUrl); //页面挂载后,先打印一下,拿到了需要上传到的url地址   ( 第一次有效打印 )
    //     this.postUrl = postUrl; //把地址保存下来
    //   }
    // });
  },
  methods: {
    // 第二步:再来写个方法, button代替input选择图片
    onPickFile() {
      this.$refs.fileInput.click();
    },
    // delImgpost() {
    //   this.postUrl = ''
    //   this.$emit('child-event', this.postUrl)
    // },
    delImg() {
      this.imageUrl = ''
      this.$emit('child-event', this.imageUrl)
    },
    // 第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile(event) {
      // console.log(event)
      if (event) {
        const files = event.target.files;
        // this.$emit('child-event', files)
        let filename = files[files.length - 1].name; // 只有一个文件
        this.name = filename
        this.$emit('ika-img', this.name)
        if (filename.lastIndexOf(".") <= 0) {
          return alert("请添加一张图片!"); // 判断图片是否有效
        }
        const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
        // fileReader.readAsDataURL(files[files.length - 1]);
        fileReader.readAsBinaryString(files[files.length - 1]);
        fileReader.addEventListener("load", () => {
          this.imageUrl = window.btoa(fileReader.result.toString());
          // this.imageUrl = fileReader.result;
          // console.log(this.imageUrl)
          // console.log(this.imageUrl)
          // this.postUrl = this.imageUrl
          this.$emit('child-event', this.imageUrl)
        });
      }
      // if (this.postUrl) {
      //   this.imageUrl = this.postUrl
      //   // console.log(this.imageUrl)
      //   this.$emit('child-event', this.imageUrl)
      // }
      // fileReader.readAsBinaryString(files[files.length - 1]);
      // fileReader.onload = function(f) {
      //   this.imageUrl = fileReader.result;
      // }
      // this.image = files[files.length - 1];
      // 到这里后, 选择图片就可以显示出来了
      // console.log(this.image)
      // 子组件向父组件传值
    }
    // 第四步: 上传文件了
    // onUpload(event) {
    //   event.preventDefault();
    //   let fd = new FormData(); //内置方法new FormData()  新建一个表格
    //   fd.append("file", this.image); //把image添加进去
    //   console.log(this.image); //(       第二次有效打印           )
    //   axios
    //     .post(this.postUrl, fd)
    //     .then(res => {
    //       //第一个参:this.postUrl就是上面保存好的要上传的地址
    //       console.log(res); //(      第三次有效打印    )
    //       if (res.status === 200 && res.data) {
    //         let data = res.data.data;
    //         let imageUrl = data.url; //上传成功 , 后台返回了一个图片地址
    //         this.imageUrl = imageUrl;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>
<style lang="scss" scoped>
/* .xunzeimage{
    border: 1px solid #6ecae3;
    width: 80px;
    background-color: transparent;
    line-height: 40px;
    border-radius: 4px;
    color: rgb(161, 154, 154);
    font-weight: 600;
    height: 40px;
    margin-left: -10px;
} */
.main {
    display: flex;
    flex-direction: column;
    .xunzeimage{
        border: 1px solid #6ecae3;
        width: 40px;
        height: 40px;
        padding: 0;
        background-color: transparent;
        line-height: 40px;
        border-radius: 4px;
        color: rgb(161, 154, 154);
        font-weight: 600;
        /* position: relative; */
        i {
            font-size: 40px;
        }
        /* height: 40px; */
        /* margin-left: -10px; */
    }
    .imgUrl {
        width: 70%;
        position: relative;
        div {
        width: 100%;
          position: relative;
        .el-button {
            display: none;
            position:absolute;
            top: -5px;
            right: -5px;
        }
        }
        img{
            width: 100%;
            margin: 10px 0;
        }
    }
    .imgUrl:hover {
        .el-button {
            display: block;
        }
    }
    h4 {
      margin: 0;
      padding: 0;
    }
}
.el-icon-close {
  font-size: 24px;
  // color: #fff;
}
::v-deep .el-button--text {
    color: #ff4040;
}
.el-button.is-disabled.el-button--text {
    background-color: transparent;
    color: #C0C4CC;
}
</style>
